<template>
  <div class="user-home-container">
    <div class="top-wrap"></div>
    <div class="user-home-wrap">
      <div class="user-home">
        <div class="left-wrap">
          <el-card class="left-user-card" :body-style="{'padding':'0'}">
            <div class="background"></div>
            <div class="user-info">
              <el-image :src="store.state.userInfo.profile.avatarUrl"></el-image>

              <div class="user-info-right">
                <span>{{store.state.userInfo.profile.nickname}}</span>
                <span class="user-level">LV.8</span>
                <Male
                  v-if="store.state.userInfo.profile.gender"
                  style="width:20px;height:20px;color:rgb(38,166,228);"
                ></Male>
                <Female v-else style="width:20px;height:20px;color:rgb(255,77,148);"></Female>
              </div>
            </div>
            <div class="user-profile">
              <p>
                <span>年龄:</span>
                {{userAge}}
              </p>
              <p>
                <span>个人介绍:</span>
                {{store.state.userInfo.profile.signature}}
              </p>
            </div>
            <!-- <el-divider /> -->
            <div class="user-follow">
              <li>
                动态
                <span>{{store.state.userInfo.profile.eventCount}}</span>
              </li>
              <li>
                关注
                <span>{{store.state.userInfo.profile.follows}}</span>
              </li>
              <li>
                粉丝
                <span>{{store.state.userInfo.profile.followeds}}</span>
              </li>
            </div>
          </el-card>

          <el-card class="user-playlist">
            <template #header>
              <div class="card-header">
                <span>我的歌单</span>
              </div>
            </template>

            <div class="my-playlist">
              <user-home-card v-for="item in userPlayList" :songListInfo="item" :key="item.id"  @click="router.push({name:'userMusic',params:{pid:item.id}})"></user-home-card>
            </div>
          </el-card>

          <el-card class="user-playlist">
            <template #header>
              <div class="card-header">
                <span>收藏歌单</span>
              </div>
            </template>

            <div class="my-playlist">
              <user-home-card v-for="item in collectPlayList" :songListInfo="item" :key="item.id" ></user-home-card>
            </div>
          </el-card>
        </div>

        <div class="right-wrap">
          <ranking-card :songList="userRecord"></ranking-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, computed, ref } from "vue";
import { useStore } from "vuex";
import { getAstro } from "../utils/timeFormat";
import RankingCard from "../components/UserMusic/Ranking-Card.vue";
import UserHomeCard from "../components/UserHome/User-Home-Card.vue";
import { HttpManager } from "../api/index";
import {useRouter} from 'vue-router'

export default defineComponent({
  name: "userHome",
  components: { RankingCard, UserHomeCard },
  setup() {
    const store = useStore();
    const router = useRouter();

    const userRecord = ref([]);
    let allPlayList = ref([]);
    let userPlayList = ref([]);
    let collectPlayList = ref([]);

    const userAge = computed(() => {
      //用户年龄

      return getAstro(store.state.userInfo.profile.birthday);
    });

    HttpManager.getUserRecord({
      uid: store.state.userInfo.userPoint.userId,
      type: 1,
    }).then((res: any) => {
      console.log("用户播放记录", res);
      userRecord.value = res.weekData;
    });

    HttpManager.getUserPlayList({
      uid: store.state.userInfo.userPoint.userId,
    }).then((res: any) => {
      allPlayList.value = res.playlist;
      res.playlist.forEach((item: any) => {
        if (item.userId === store.state.userInfo.userPoint.userId) {
          userPlayList.value.push(item);
        } else {
          collectPlayList.value.push(item);
        }
      });
    });

    return {
      store,
      router,
      userAge,
      userRecord,
      allPlayList,
      userPlayList,
      collectPlayList,
    };
  },
});
</script>
 
<style lang = "scss" scoped>
@import "../assets/css/user-home.scss";
</style>